<template>
  <div class="mapview-main">
    <div id="amap"></div>
  </div>
</template>

<style lang="scss" scoped>
.mapview-main {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url("../assets/bg.png") repeat;

  .mapview-main-border {
    position: relative;
    top: 0;
    background: url("../assets/bgBorder.png") no-repeat;
    background-size: 100%;
    width: 100%;
    height: 100%;
    display: flex;
  }
}
#amap {
  width: 100%;
  height: 100%;
  .amap-maps {
    background: #fff;
    .amap-layers {
      .amap-markers {
        .amap-marker {
          .amap-marker-label {
            width: 60px;
            font-size: 16px;
            line-height: 18px;
            text-align: center;
            height: 28px;
            font-family: STLiti;
            color: green;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, 0.4);
            border: solid 2px rgba(100, 255, 200, 0.8);
          }
        }
      }
    }
  }
}
</style>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// eslint-disable-next-line no-irregular-whitespace
import { useStore } from 'vuex';

export default {
  name: "AMap",
  data() {
    return {
      store:useStore(),//此处初始化store对象
      massMarks: {},
      map: null,
      allData: []
    };
  },
  mounted() {
   this.allData = this.store.getters.getCompanys;
    // console.log('mapDatas:', this.allData);
    AMapLoader.load({
      key: "1e97390b37701c6461f796389086cf7d",
      version: "2.0",
      plugins: ["AMap.DistrictSearch", "AMap.ElasticMarker"]
    })
      .then(AMap => {
        new AMap.DistrictSearch({
          extensions: "all",
          subdistrict: 0
        }).search("崇川区", (status, result) => {
          const lalList = result.districtList[0].boundaries[0].map(e => {
            return [e.lng, e.lat];
          });
          // console.log(AMap);

          // this.massMarks = new AMap.MassMarks({
          //   // zIndex: 1, // 海量点图层叠加的顺序
          //   zooms: [3, 19], // 在指定地图缩放级别范围内展示海量点图层
          //   style: {
          //     url: "//vdata.amap.com/icons/b18/1/2.png", // 图标地址
          //     size: new AMap.Size(11, 11), // 图标大小
          //     anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
          //   } // 设置样式对象
          // });
          var options = {
            hideWithoutStyle: true, //是否隐藏设定区域外的楼块
            areas: [
              {
                //围栏1
                visible: true, //是否可见
                rejectTexture: true, //是否屏蔽自定义地图的纹理
                color1: "ffc5d3ff", //楼顶颜色
                color2: "ff576376", //楼面颜色
                path: lalList
              }
            ]
          };
          options.areas[0].path = lalList;
          var buildingLayer = new AMap.Buildings(
            {
              wallColor: "ff576000",
              roofColor: "ffc5d3ff",
              zIndex: 40,
              zooms: [14, 20],
              heightFactor: 2
            },
            options
          );
          this.map = new AMap.Map("amap", {
            zoom: 1,
            zooms: [1, 20],
            pitch: 50,
            showIndoorMap: false,
            showLabel: false,
            mapStyle: "amap://styles/4827cfd52ae9147040d43960c5f00b0f",
            center: [120.8573, 32.0098],
            features: ["bg", "point", "road"],
            layers: [AMap.createDefaultLayer()]
          });
          this.map.addLayer(buildingLayer);

          var outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true)
          ];
          var holes = result.districtList[0].boundaries;

          var pathArray = [outer];
          pathArray.push.apply(pathArray, holes);
          var polygon = new AMap.Polygon({
            pathL: pathArray,
            //线条颜色，使用16进制颜色代码赋值。默认值为#006600
            strokeColor: "rgb(20,164,173)",
            strokeWeight: 4,
            //轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            strokeOpacity: 0.5,
            //多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
            fillColor: "rgba(0,0,0)",
            //多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            fillOpacity: 1,
            //轮廓线样式，实线:solid，虚线:dashed
            strokeStyle: "dashed",
            /*勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在    
              ie9+浏览器有效 取值： 
              实线：[0,0,0] 
              虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
              点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实 
              线和10个像素的空白 （如此反复）组成的虚线*/
            strokeDasharray: [10, 2, 10]
          });

          var facilities = [];
              for (let i = 0; i < this.allData.length; i++) {
                const teg = this.allData[i];
                teg.lnglat = teg.value.split(",");
                /**
                 * 坐标显示
                 */
                var zoomStyleMapping1 = {
                  14: 0,
                  15: 0,
                  16: 1,
                  17: 1,
                  18: 1,
                  19: 1,
                  20: 1
                };
                var marker = new AMap.ElasticMarker({
                  position: teg.lnglat,
                  zooms: [1, 20],
                  zIndex: 99,
                  styles: [
                    {
                      // icon: {
                      //   img:
                      //     "https://a.amap.com/jsapi_demos/static/resource/img/trees.png",
                      //   size: [16, 16], //可见区域的大小
                      //   ancher: [8, 16], //锚点
                      //   fitZoom: 14, //最合适的级别
                      //   scaleFactor: 2, //地图放大一级的缩放比例系数
                      //   maxScale: 2, //最大放大比例
                      //   minScale: 1 //最小放大比例
                      // },
                      label: {
                        show: false,
                        content: teg.name,
                        offset: [-35, 0],
                        position: "BM"
                      }
                    }
                  ],
                  zoomStyleMapping: zoomStyleMapping1
                });
                facilities.push(marker);
            }
          // eslint-disable-next-line no-unused-vars
          let that = this;
          window.setTimeout(function() {
            console.log('facilities:',facilities)
            that.map.add(facilities);
          }, 1000);
          // polygon.setPath(pathArray);
          this.map.add(polygon);
        });
      })
      .catch(e => {
        console.log(e);
      });

    // eslint-disable-next-line no-unused-vars
    window.addEventListener("message", event => {
      // console.log('event===========',event)
      // console.log(event.data.mapData,' ---------event.data.mapData')
      if (this.map) {
        // this.getTypesForType(event.data.mapData,event.data.type)
        this.map.setZoom(17);
      }
    });
  },
  methods: {
    getTypesForType(data, type) {
      var typeNameArr = {
        b1Data: [
          {
            value: 0,
            name: type
          }
        ],
        b2Data: {
          keys: ["windows", "centOs", "ubuntu"],
          datas: [0, 0, 0]
        },
        b3Data: {
          keys: ["http", "https", "pop3"],
          datas: [0, 0, 0]
        },
        b6Data: {
          keys: [
            "安全产品",
            "物联网设备",
            "企业应用",
            "网络产品",
            "支撑系统",
            "系统软件",
            "办公外设"
          ],
          datas: [0, 0, 0, 0, 0, 0, 0]
        }
      };
      for (let i = 0; i < data.length; i++) {
        const teg = data[i];
        for (let j = 0; j < typeNameArr.b1Data.length; j++) {
          if (teg.type == typeNameArr.b1Data[j].name) {
            typeNameArr.b1Data[j].value += 1;
          }
        }
        for (let k = 0; k < typeNameArr.b2Data.keys.length; k++) {
          const key = typeNameArr.b2Data.keys[k];
          const key3 = typeNameArr.b3Data.keys[k];
          if (teg.system == key) {
            typeNameArr.b2Data.datas[k] += 1;
          }
          if (teg.protocols == key3) {
            typeNameArr.b3Data.datas[k] += 1;
          }
        }
        for (let z = 0; z < typeNameArr.b6Data.keys.length; z++) {
          const key6 = typeNameArr.b6Data.keys[z];
          if (teg.addressType == key6) {
            typeNameArr.b6Data.datas[z] += 1;
          }
        }
      }
      return typeNameArr;
    }
  }
};
</script>
